// =============================================================================
// SCSS/SITE/STACKS/RENEW/_DROPDOWNS.SCSS
// -----------------------------------------------------------------------------
// Styling for dropdowns in various instances.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
//   02. Masthead Inline Positioning
//   03. Masthead Stacked Positioning
//   04. Hover State
//   05. Active State
//   06. Superfish Styles
//   07. Portfolio Filters
// =============================================================================

// The Dropdown Menu
// =============================================================================

//
// 1. None by default, but block on menu open.
// 2. Override default <ul>.
//

.x-navbar {
  .sub-menu {
    position: absolute;
    top: 100%;
    display: none; // 1
    float: left;
    min-width: 250px;
    margin: 0; // 2
    padding: $dropdownPadding;
    @include font-size(1.2);
    list-style: none;
    background-color: $navbarBackground;
    z-index: $zindexDropdown;
    @include translate3d(0, 0, 0);
    @include background-clip(padding-box);

    li {
      position: relative;

      > a {
        display: block;
        padding: $dropdownLinkPadding;
        line-height: 2;
        white-space: nowrap;
        color: $navbarLinkColor;
        @include transition(#{none});
      }

      &:before,
      &:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        @include opacity(0.125);
      }

      &:before {
        top: 0;
        height: 1px;
      }

      &:last-child:after {
        bottom: -1px;
        height: 1px;
      }
    }
  }
}



// Masthead Inline Positioning
// =============================================================================

.masthead-inline {
  .x-navbar {
    .sub-menu {
      left: auto;
      right: 0;

      .sub-menu {
        right: $superfishSubmenuOffset;
      }
    }

    &.x-navbar-fixed-left {
      .sub-menu {
        top: 0;
        left: $superfishFirstDropdownSide;
        right: auto;

        .sub-menu {
          top: $superfishSubmenuTop + 2;
          left: $superfishSubmenuOffset;
          right: auto;
        }
      }
    }

    &.x-navbar-fixed-right {
      .sub-menu {
        top: 0;
        left: auto;
        right: $superfishFirstDropdownSide;

        .sub-menu {
          top: $superfishSubmenuTop + 2;
          left: auto;
          right: $superfishSubmenuOffset;
        }
      }
    }
  }
}



// Masthead Stacked Positioning
// =============================================================================

.masthead-stacked {
  .x-navbar {
    .sub-menu {
      left: 0;
      right: auto;

      .sub-menu {
        left: $superfishSubmenuOffset;
      }
    }
  }
}



// Hover State
// =============================================================================

.x-navbar {
  .sub-menu li > a:hover {
    text-decoration: none;
  }
}



// Superfish Styles
// =============================================================================

.sf-menu ul {
  position: absolute;
  top: -9999em;
}

.sf-menu li {
  position: relative;
}

.sf-menu li:hover {
  visibility: inherit;
}

.sf-menu a {
  position: relative;
}

.sf-menu a .sf-sub-indicator {
  position: absolute;
  top: -9999em;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
  top: $superfishFirstDropdownTop;
  left: 0;
  z-index: 9999;
}

.sf-menu li:hover li ul,
.sf-menu li.sfHover li ul {
  top: -9999em;
}

.sf-menu li li:hover ul,
.sf-menu li li.sfHover ul {
  top: $superfishSubmenuTop;
  left: $superfishSubmenuOffset;
}